<template>
  <div class="flex flex-column register">
    <div class="flex-1 flex flex-center flex-middle">
      <div class="flex register-container">
        <div
          class="flex-1 flex flex-column flex-center flex-middle register-description"
        >
          <div class="flex flex-column flex-middle register-keywords">
            <div>潮流玩法，不断更新</div>
            <div>流量推广，全面整合</div>
            <div>媒体大咖，一键合作</div>
            <div>线上线下，轻松玩转</div>
          </div>
          <div class="flex-center register-solgan">
            营加重新定义您的生意
          </div>
        </div>
        <div
          class="flex flex-column flex-between flex-middle bg-white register-wrap"
          style="width:544px"
        >
          <div class="register-form-wrap">
            <div class="register-legend">
              {{ $t('register.welcome') }}
            </div>
            <a-form :form="form" class="register-form" @submit="handleSubmit">
              <!-- 手机号邮箱 -->
              <a-form-item>
                <a-input
                  v-model="mobile_emil"
                  v-decorator="[
                    'mobileEmail',
                    {
                      rules: [
                        {
                          required: true,
                          message: () => {
                            return (
                              $t('register.please') + $t('register.mobileEmail')
                            )
                          }
                        }
                      ]
                    }
                  ]"
                  :placeholder="
                    $t('register.please') + $t('register.mobileEmail')
                  "
                >
                  <a-icon
                    slot="prefix"
                    type="user"
                    style="color: #999;font-size:24px;"
                  />
                </a-input>
              </a-form-item>
              <!-- 密码 -->
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: () => {
                            return $t('register.pwd_error')
                          }
                        }
                      ]
                    }
                  ]"
                  type="password"
                  :placeholder="$t('register.setPwd')"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color: #999;font-size:24px;"
                  />
                </a-input>
              </a-form-item>
              <!-- 验证码 -->
              <a-form-item>
                <a-input
                  v-decorator="[
                    'verificationCode',
                    {
                      rules: [
                        {
                          required: true,
                          message: () => {
                            return (
                              $t('register.please') +
                              $t('register.verificationCode')
                            )
                          }
                        }
                      ]
                    }
                  ]"
                  class="verificationCode"
                  style="text-align:left;"
                  :placeholder="
                    $t('register.please') + $t('register.verificationCode')
                  "
                >
                  <a-button
                    slot="addonAfter"
                    shape="round"
                    type="primary"
                    :disabled="again_get_code ? false : true"
                    @click="get_vers_code"
                  >
                    <span v-if="again_get_code">
                      {{ $t('register.send') }}
                      {{ $t('register.verificationCode') }}
                    </span>
                    <span v-else>{{ count_down }}s</span>
                  </a-button>
                </a-input>
              </a-form-item>
              <a-form-item>
                <div class="flex flex-between">
                  <a-checkbox
                    v-decorator="[
                      'treaty',
                      {
                        valuePropName: 'checked',
                        initialValue: false
                      }
                    ]"
                  >
                    {{ $t('register.miAgree') }}
                    <span style="color:#167AFA;" @click.stop="show = true">
                      {{ $t('register.treaty') }}
                    </span>
                  </a-checkbox>
                </div>
              </a-form-item>
              <a-button
                block
                shape="round"
                size="large"
                type="primary"
                html-type="submit"
                :loading="loading"
                class="register-form-button"
              >
                {{ $t('global.register') }}
              </a-button>
            </a-form>
          </div>
          <div style="font-size:16px;" class=" margin-top-15">
            已有账号，
            <nuxt-link to="/login">
              立即登录
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      title="服务协议"
      :visible="show"
      cancel-text="返回注册页"
      ok-text="我已阅读并同意协议"
      @ok="onOk"
      @cancel="show = false"
    >
      <p class="agreement-tit">协议主体及范围</p>
      <p class="agreement-cont">
        协议主体指本协议双方，即同意接受本协议全部条款及使用极验服务的“您”和提供极验服务的“极验”。“您”在
        本协议项下亦可能被称呼为“用户”。本协议由双方共同缔结，对双方均具有法律约束力。请确保您是具备完全民事
        权利能力和完全民事行为能力的自然人,法人或其他组织，如您不具备上述要求，您将不能正常使用极验服务。
      </p>
    </a-modal>
    <div class="copyright">
      <Copyright />
    </div>
    <div class="logo">
      <img src="~/assets/images/logo.png" />
    </div>
  </div>
</template>

<script>
import Copyright from '@/components/The/Copyright'
import {
  mobilePattern,
  emailPattern,
  pwdPattern
} from '@/utils/validateRegular'
import { setStore } from '@/utils/storage'
export default {
  components: {
    Copyright
  },
  data() {
    return {
      show: false,
      mobile_emil: '',
      password: '',
      loading: false,
      again_get_code: true,
      count_down: 60
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_register' })
  },
  methods: {
    onOk() {
      this.show = false
      this.form.setFieldsValue({ treaty: true })
    },
    async get_vers_code() {
      if (this.again_get_code) {
        /**
         * 获取短信信息
         * 1、限制重复点击
         * 2、判定是否获取成功
         *    2-1、获取成功启动倒计时
         *    2-2、获取失败不驱动
         */
        this.mobile_emil = this.form.getFieldValue('mobileEmail')
        this.password = this.form.getFieldValue('password')
        if (
          !mobilePattern.test(this.mobile_emil) &&
          !emailPattern.test(this.mobile_emil)
        ) {
          this.$notification.error({
            message: this.$t('register.mobile_email_error')
          })
        } else if (!pwdPattern.test(this.password)) {
          this.$notification.error({
            message: this.$t('register.pwd_error')
          })
          return
        }
        this.again_get_code = false
        try {
          const { code, msg } = await this.$api.user.sendVerificationCode({
            account: this.mobile_emil,
            event: 'register'
          })
          if (code === 1) {
            this.$notification.success({
              message: msg
            })
            const ITW = setInterval(() => {
              if (!this.count_down) {
                this.again_get_code = true
                this.count_down = 60
                clearInterval(ITW)
              }
              this.count_down--
            }, 1000)
          } else {
            this.again_get_code = true
          }
        } catch (error) {
          // 模拟请求失败
          this.again_get_code = true
          this.$notification.error({
            message: this.$t('register.code_send_error')
          })
        }
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          if (!values.treaty) {
            this.$notification.error({
              message: this.$t('register.complete_agreement')
            })
            return
          }
          try {
            const QUERY = {
              account: values.mobileEmail,
              event: 'register',
              password: values.password,
              captcha: values.verificationCode
            }
            this.loading = true
            const { code, msg, data } = await this.$api.user.register(QUERY)
            this.loading = false
            if (code === 1) {
              this.$notification.success({
                message: msg
              })
              this.setInfo(data)
            } else {
              this.loading = false
            }
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    setInfo(data) {
      if (data && data.constructor === Object) {
        this.$store.commit('user/SET_USERINFO', data.user_info)
        this.$store.commit('user/SET_STORES', data.store_info)
        this.$store.commit('user/SET_STORE', data.store_info[0])
        setStore('token', data.user_info.token)
        setStore('userId', data.user_info.id)
        this.$router.replace('/guide')
      } else {
        console.error('regin response data undefined')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.register {
  height: 100vh;
  padding-bottom: 40px;
  background: url('~@/assets/images/login-bg.jpg') no-repeat center center;
}
.logo {
  position: absolute;
  top: 37px;
  left: 60px;
}
.register-container {
  width: 1224px;
  height: 620px;
  background-color: rgba(145, 167, 195, 0.34);
}
.register-keywords {
  color: white;
  font-size: 18px;
  margin-bottom: 104px;
  > div {
    margin-bottom: 33px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.register-solgan {
  font-size: 20px;
  color: #ffbf27;
}
.register-wrap {
  padding: 62px 0;
}
.register-legend {
  display: inline-block;
  margin-bottom: 64px;
  position: relative;
  font-size: 26px;
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background-color: @primary-color;
    transform: translate(-50%, 10px);
  }
}
.register-form-wrap {
  width: 360px;
}
.register-form-button {
  margin-top: 30px;
}
/deep/ .ant-input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 16px;
  padding-left: 40px !important;
  padding-top: 22px;
  padding-bottom: 22px;
}
/deep/ .ant-input:focus {
  box-shadow: none;
}
/deep/ .ant-input-prefix {
  left: 0;
}
.verificationCode /deep/ .ant-input {
  padding: 22px 0 !important;
  border: none;
}
/deep/ .ant-input-group-addon {
  border: none;
  background-color: transparent;
}
.verificationCode /deep/ .ant-input-group {
  border-bottom: 1px solid #d9d9d9;
}
/deep/ .ant-input {
  background-color: #fff !important;
}
/deep/ .ant-modal-content {
  width: 790px !important;
  height: 656px !important;
}
/deep/ .ant-modal-body {
  height: 543px;
  overflow: scroll;
}
.agreement-tit {
  font-weight: bold;
  color: #387dbe;
  line-height: 1;
  font-size: 14px;
}

.agreement-cont {
  font-size: 12px;
  font-weight: 400;
  color: #343434;
  line-height: 24px;
  margin-top: 24px;
}

/deep/ .ant-modal-footer div {
  display: flex;
  flex-direction: row-reverse;
  .ant-btn-primary {
    margin-right: 20px;
  }
}

/deep/ .ant-modal {
  padding: 38px 32px;
}
</style>
